﻿<!DOCTYPE html>
<html>
<head>
  <title>Content Alignment examples</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <meta name="description" content="An interactive GoJS Diagram demonstrating viewports and document bounds and alignment and scaling." />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="../release/go.js"></script>
  <script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
  <script id="code">
    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram = $(go.Diagram, "myDiagramDiv",  // Must be the ID or reference to div
        {
          "undoManager.isEnabled": true
        });

      for (var i = 0; i < 15; i++) {
        myDiagram.add( // add an unbound Node to the diagram at a random position
          $(go.Node,
            { position: new go.Point(Math.random() * 251, Math.random() * 251) },
            $(go.Shape, "Circle",
              { fill: go.Brush.randomColor(150), strokeWidth: 2, desiredSize: new go.Size(30, 30) })
          ));
      }

      // automatically update information in the panel
      myDiagram.addDiagramListener("DocumentBoundsChanged", updateDOM);
      myDiagram.addDiagramListener("ViewportBoundsChanged", updateDOM);

      var myPosX = document.getElementById("positionX");
      var myPosY = document.getElementById("positionY");
      var myScale = document.getElementById("scale");
      var myDocBounds = document.getElementById("docBounds");

      function updateDOM(e) {
        var d = e.diagram;
        var pos = d.position;
        myPosX.value = Math.round(pos.x, 2);
        myPosY.value = Math.round(pos.y, 2);
        myScale.value = d.scale;
        var b = d.documentBounds;
        myDocBounds.textContent = b.x.toFixed(2) + ", " + b.y.toFixed(2) + "  " + b.width.toFixed(2) + " x " + b.height.toFixed(2);
      }
    }

    // occurs when one of the contentAlign radio buttons is clicked
    function changeContentAlign(spot) {
      myDiagram.startTransaction("");
      myDiagram.contentAlignment = go.Spot[spot];
      myDiagram.commitTransaction("");
    }

    function changePosition(posx, posy) {
      myDiagram.startTransaction("");
      var x = parseInt(posx);
      var y = parseInt(posy);
      myDiagram.position = new go.Point(x, y);
      myDiagram.commitTransaction("");
    }

    function changeScale(scale) {
      var scale = parseFloat(scale);
      if (scale > 0) {
        myDiagram.startTransaction("");
        myDiagram.scale = scale;
        myDiagram.commitTransaction("");
      }
    }

    function changeFixedBounds(fx, fy, fw, fh) {
      myDiagram.startTransaction("");
      var x = parseFloat(fx);
      var y = parseFloat(fy);
      var h = parseFloat(fw);
      var w = parseFloat(fh);
      myDiagram.fixedBounds = new go.Rect(x, y, Math.max(1, w), Math.max(1, h));
      myDiagram.commitTransaction("");
    }

    function changePadding(pt, pr, pb, pl) {
      myDiagram.startTransaction("");
      var t = parseFloat(pt);
      var r = parseFloat(pr);
      var b = parseFloat(pb);
      var l = parseFloat(pl);
      myDiagram.padding = new go.Margin(t, r, b, l);
      myDiagram.commitTransaction("");
    }

    function changeAutoScale(scaleType) {
      myDiagram.startTransaction("");
      myDiagram.autoScale = go.Diagram[scaleType];
      myDiagram.commitTransaction("");
    }
  </script>
</head>
<body onload="init()">
<div id="sample">
<div style="width:100%; white-space: nowrap">
  <div style="display: inline-block; vertical-align: top; width:50%">
    <div id="myDiagramDiv" style="height: 400px; background: whitesmoke; border: solid 1px black"></div>
  </div>

  <div style="display: inline-block; vertical-align: top; width:50%">
    <div style="border: solid 1px black; padding:5px">
      Diagram.documentBounds: <div id="docBounds" style="display: inline-block"></div>

      <p>Diagram.contentAlignment:<br />
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="None" checked/><label for="None">None</label>
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Center"/><label for="Center">Center</label><br/>
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Left"/><label for="Left">Left</label>
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Right"/><label for="Right">Right</label><br/>
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Top"/><label for="Top">Top</label>
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Bottom"/><label for="Bottom">Bottom</label><br/>
      </p>
      <p>Diagram.position:<br />
        <input type="text" size="3" id="positionX" value="NaN"/>
        <input type="text" size="3" id="positionY" value="NaN"/>
        <input type="button" onclick="changePosition(positionX.value, positionY.value)" value="Change"/>
      </p>

      <p>Diagram.scale:<br />
        <input type="text" size="3" id="scale" value="1"/>
        <input type="button" onclick="changeScale(scale.value)" value="Change"/>
      </p>

      <p>Diagram.fixedBounds (x, y, width, height):<br />
        <input type="text" size="3" id="fixedX" value="NaN"/>
        <input type="text" size="3" id="fixedY" value="NaN"/>
        <input type="text" size="3" id="fixedW" value="NaN"/>
        <input type="text" size="3" id="fixedH" value="NaN"/>
        <input type="button" onclick="changeFixedBounds(fixedX.value, fixedY.value, fixedW.value, fixedH.value)" value="Set"/>
      </p>

      <p>Diagram.padding (top, right, bottom, left):<br />
        <input type="text" size="3" id="padT" value="5"/>
        <input type="text" size="3" id="padR" value="5"/>
        <input type="text" size="3" id="padB" value="5"/>
        <input type="text" size="3" id="padL" value="5"/>
        <input type="button" onclick="changePadding(padT.value, padR.value, padB.value, padL.value)" value="Set"/>
      </p>

      <p>Diagram.autoScale:<br />
        <input type="radio" name="autoScale" onclick="changeAutoScale(this.value)" id="DiagramNone" value="None" checked /><label for="DiagramNone">Diagram.None</label><br/>
        <input type="radio" name="autoScale" onclick="changeAutoScale(this.id)" id="Uniform" /><label for="Uniform">Diagram.Uniform</label><br/>
        <input type="radio" name="autoScale" onclick="changeAutoScale(this.id)" id="UniformToFill" /><label for="UniformToFill">Diagram.UniformToFill</label><br/>
        (but no greater than CommandHandler.defaultScale)
      </p>
      <input type="button" onclick="myDiagram.commandHandler.zoomToFit()" value="Zoom to Fit"/>
    </div>
  </div>
    <p>
        A Diagram's <a>Diagram.contentAlignment</a> property determines how parts are positioned when the
        <a>Diagram.viewportBounds</a> width or height is different than the <a>Diagram.documentBounds</a> width or height.
    </p>
</div>
</div>
</body>
</html>
